<template>
  <div>
    <div class="card" style="margin-bottom: 10px">
      <el-input placeholder="请输入药品名称进行查询" style="width: 200px" v-model="data.formData.productName"></el-input>
      <el-button type="primary" plain style="margin-left: 10px" @click="loadDataByName">查询</el-button>
      <el-button type="warning"  style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

  <div class="card" style="margin-bottom: 5px">
    <div class="table">
      <el-button type="danger" @click="deleteBatch" style="margin-bottom: 20px">批量删除</el-button>
      <el-table :data="data.damageData" stripe max-height="450px" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" fixed="left"></el-table-column>
        <el-table-column prop="productName" label="药品名称" fixed="left"></el-table-column>
        <el-table-column label="药品图片" fixed="left">
          <template #default="scope">
            <el-image
                :src="scope.row.imageUrl"
                :preview-src-list="[scope.row.imageUrl]"
                preview-teleported
                style="width: 40px; height: 40px; border-radius: 50%"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="employeeName" label="报损人姓名"></el-table-column>
        <el-table-column prop="quantity" label="报损数量"></el-table-column>
        <el-table-column prop="reportCause" label="报损原因" show-overflow-tooltip width="100"></el-table-column>

        <el-table-column prop="reportTime" label="报损时间" width="170"></el-table-column>
        <el-table-column prop="currentStock" label="当前库存"></el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template v-slot="scope">
<!--            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">补货</el-button>-->
            <el-button size="mini" type="danger" plain @click="deleteById(scope.row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            style="margin-top: 5px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data.pageNum"
            :page-sizes="[3, 5, 10, 15, 20]"
            :page-size="data.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total">
        </el-pagination>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup>
import{ref,reactive,onMounted} from "vue";
import {
  deleteBatchDamageReportApi,
  deleteDamageReportApi,
  loadDamageReportApi, selectByProductNameApi
} from "@/utils/API/demageReport/damageReport";
import {ElMessage, ElMessageBox} from "element-plus";
const data = reactive({
  damageData:[],
  pageNum:1,
  pageSize:10,
  total:0,
  formData:{},
  ids:[]

})
//记载货物报损单
const loadDamageData = () => {
  let params = {
        productName:data.formData.productName,
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  };

  loadDamageReportApi(params).then(res => {
    if (res.code === '200') {
      console.log(res);
      data.damageData = res.data?.list.map(processDamageReport);
      data.total = res.data?.total || 0;
    }else{
      ElMessage.error("加载货物报损单失败");
    }
  }).catch(error => {
    console.error("Error fetching damage report:", error);
  });
};
//处理数据
const processDamageReport = (report) => {
  const { sellerProduct, ...damageReportData } = report;
  return {
    ...damageReportData,
    category: sellerProduct.category,
    description: sellerProduct.description,
    imageUrl: sellerProduct.imageUrl,
    price: sellerProduct.price,
    productName: sellerProduct.productName,
    productStatus: sellerProduct.productStatus,
    unit: sellerProduct.unit,
    currentStock: sellerProduct.currentStock,
  };
};


// 处理页码变化
const handleCurrentChange = (pageNum) => {
  data.pageNum = pageNum
loadDamageData()
}
const handleSizeChange=(pageSize)=> {
  data.pageSize = pageSize
  loadDamageData()
}
// 处理选中的行
const handleSelectionChange = (rows) => {
  data.ids = rows.map(v => v.id)
}

const reset = () => {
  data.formData={}
  loadDamageData()
}

const deleteById = (row) => {
  let params = {
    id:row.id,
  };
  ElMessageBox.confirm('您确定删除吗？', '确认删除', { type: 'warning' }).then(resp=>{
    deleteDamageReportApi(params).then(res => {
      if (res.code === '200') {
        ElMessage.success("删除成功");
        loadDamageData()
      }else{
        ElMessage.error("删除失败");
      }
    }).catch(error => {
      console.error("Error fetching damage report:", error);
    });
  }).catch(e=>{
    console.log(e)
  })
}
const loadDataByName =()=>{
  let params = {
    productName:data.formData.productName,
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  };
  selectByProductNameApi(params).then(res => {
    if (res.code === '200') {
      console.log(res);
      data.damageData = res.data?.list.map(processDamageReport);
      data.total = res.data?.total || 0;
    }else{
      ElMessage.error("加载货物报损单失败");
    }
  })
}
const deleteBatch =()=>{
  if(data.ids.length === 0){
    ElMessage.warning("请选择要删除的数据")
    return
  }
  ElMessageBox.confirm('您确定删除吗？', '确认删除', { type: 'warning' }).then(resp=>{
    deleteBatchDamageReportApi(data.ids).then(res=>{
      if (res.code === '200') {
        ElMessage.success("删除成功")
        loadDamageData()
      }else{
        ElMessage.error("删除失败")
      }
    })
  }).catch(e=>{
    console.log(e)
  })
}
onMounted(()=>{
    loadDamageData()
    })
</script>

<style scoped>
@import '@/assets/css/tabelContent.css';
</style>